<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dialog{
            width: 100%;
            height: 100%;
            position: absolute;
            left:0px;
            top: 0px;
            background-color: rgba(255,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
        .content{
            width: 600px;
            height: 300px;
            border: 2px solid #000;
            background-color: white;
            padding: 20px;
        }
    </style>
    <script src="book.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function () {
            init();
        }

        function init(){
            let str = "";
            bookArray.forEach(n =>{
                str += `<tr><td>${n.id}</td><td>${n.name}</td><td>${n.price}</td>
                <td><input type="button" value="删除" onclick="del(${n.id})">
                <input type="button" value="修改" onclick="findById(${n.id})"></td></tr>`;
            });

            $("data").innerHTML = str;
        }

        function findById(bookId){
            //按书籍id查找书籍对象
            let bookObj = bookArray.find(n => n.id == bookId);
            $("idSpan").innerHTML = bookObj.id;
            $("nameSpan").innerHTML = bookObj.name;
            $("updatePrice").value = bookObj.price;

            $("updateDiv").style.visibility = "visible";
        }

        function del(bookId){
            //得到指定ID对应的数组下标
            let index = bookArray.findIndex(n => n.id == bookId);
            //从指定下标开始，删除1个元素
            bookArray.splice(index,1);
            init();
        }

        function addBook(){
            var bookObj = {};
            bookObj.id = $("bookId").value;
            bookObj.name = $("bookName").value;
            bookObj.price = parseInt($("bookPrice").value);

            //在数组尾部追加元素
            bookArray.push(bookObj);
            init();
            $("addDiv").style.visibility = "hidden";

            $("bookId").value = "";
            $("bookName").value = "";
            $("bookNPrice").value = "";
        }

        function updateBook(){
            let bookObj = bookArray.find(n => n.id == $("idSpan").innerHTML);
            bookObj.price = parseInt($("updatePrice").value);
            init();
            $("updateDiv").style.visibility = "hidden";
        }

    </script>
</head>
<body>
    <table border="1" width="50%" cellspacing="0">
        <thead>
            <tr><th>编号</th><th>书名</th><th>单价</th><th>操作</th></tr>
        </thead>

        <tbody id="data"></tbody>
    </table>
    <input type="button" value="添加" onclick="$('addDiv').style.visibility = 'visible'">

    <div id="addDiv" class="dialog">
        <div class="content">
            编号：<input type="text" id="bookId"><br>
            书名：<input type="text" id="bookName"><br>
            单价：<input type="text" id="bookPrice"><br>
            <input type="button" value="添加" onclick="addBook()">

        </div>
    </div>

    <div id="updateDiv" class="dialog">
        <div class="content">
            编号：<span id="idSpan"></span><br>
            书名：<span id="nameSpan"></span><br>
            单价：<input type="text" id="updatePrice"><br>
            <input type="button" value="修改" onclick="updateBook()">

        </div>
    </div>


</body>
</html>